import React from 'react';
import styles from './index.module.less';
import { List, Popover, Badge, Dropdown, Button, Avatar } from 'antd';
import { useNavigate } from 'react-router-dom';
import { logout } from '@/api/request';

//头部组件
const Header: React.FC = () => {
  const navigate = useNavigate();

  const content = (
    <List
      dataSource={[{}]}
      renderItem={(item) => {
        console.log(item);
        return (
          <List.Item>
            您与2024-11-06 13:14进行的React源码考试已批阅,请往
            <a
              type="link"
              onClick={(e) => {
                e.preventDefault();
                navigate('./subject_add');
              }}
            >
              查看
            </a>
          </List.Item>
        );
      }}
    ></List>
  );

  //退出登录的方法
  const logoutHandle = async () => {
    await logout();
    navigate('/login');
  };
  return (
    <div className={styles.wrap}>
      <div className={styles.title}>
        <h1>天丰考试管理系统</h1>
      </div>
      <div className={styles.info}>
        <Popover content={content} title="消息提示" className={styles.message}>
          <Badge size="small" overflowCount={99} offset={[-15, 10]} count={10}>
            <div />
          </Badge>
        </Popover>
        <div className={styles.personal}>
          <Dropdown
            menu={{
              items: [
                {
                  key: 'user',
                  label: (
                    <Button
                      style={{ color: 'unset' }}
                      type="link"
                      onClick={() => navigate('/person_info')}
                    >
                      个人中心
                    </Button>
                  ),
                },
                {
                  key: 'logout',
                  label: (
                    <Button style={{ color: 'unset' }} type="link" onClick={logoutHandle}>
                      退出登录
                    </Button>
                  ),
                },
              ],
            }}
          >
            <div>
              <Avatar
                size={44}
                shape="square"
                //   src={getImgUrl(userInfo?.avatar) || avatar}
                src="../.././assets/png/person_info/avatar.png"
                style={{
                  marginTop: '10px',
                  backgroundPosition: 'center bottom',
                  background: 'no-repeat',
                  // backgroundColor: 'pink',
                }}
                draggable={true}
              />
            </div>
          </Dropdown>
        </div>
      </div>
    </div>
  );
};
export default Header;
